<template>
  <div>
    <div id="maps" class="map"></div>
  </div>
</template>

<script>
import hunanMap from "../assets/hunan.json";
const echarts = require("echarts/lib/echarts");
require("echarts/lib/chart/bar");
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
require("echarts/lib/component/grid");
require("echarts/lib/chart/line");
require("echarts/lib/chart/pie");
require("echarts/lib/chart/gauge");
require("echarts/lib/chart/map");
require("echarts/lib/component/visualMap");
require("echarts/lib/component/legend");
require("echarts/lib/component/toolbox");

export default {
  name: "Hunan",
  data() {
    return {
      mapData: [],
    };
  },
  methods: {
    async getMapData() {
      let resourt;
      await this.$axios({
        url: "/Statist/GetMapData",
        method: "post",
        data: {
          userdata: this.$cookies.get("userdata"),
        },
        transformRequest: [
          function (data) {
            let ret = "";
            for (let it in data) {
              ret +=
                encodeURIComponent(it) +
                "=" +
                encodeURIComponent(data[it]) +
                "&";
            }
            return ret;
          },
        ],
        headers: {
          "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
        },
      })
        .then((res) => {
          //console.log(res.data.data);
          // callback(res.data.data);
          resourt = res.data.data;
        })
        .catch((err) => {
          //console.log(err);
        });
      return resourt;
    },
    // test() {
    //   this.getMapData().then((res) => {
    //     //console.log(res);
    //   });
    // },
    getMapInfo() {
      this.getMapData().then((res) => {
        //console.log(res);
        this.buildMap(res);
      });
      // debugger
      // this.buildMap(res); //有数据格式要求，下文细说
      // this.buildMap(res.data); //有数据格式要求，下文细说
    },
    buildMap(data) {
      let _this = this;
      let myMap = echarts.init(document.getElementById("maps")); //初始化节点实例
      echarts.registerMap("湖南", hunanMap); //注册可用的地图
      //配置项
      let option = {
        //移入地图时展示信息
        tooltip: {
          trigger: "item",
          // confine: true,
          renderMode: "richText",
          // formatter: "{b}</br>{c}</br>{d}",
          formatter: function (params) {
            return `${params.data.name}\n入库企业数：${params.data.value}\n服务企业数：${params.data.myval}`;
          },
          // triggerOn: "click",
          // backgroundColor: "opacity",
          //感觉代码写的不美观。。。显示的样式根据情况而定
        },
        toolbox: {
          show: true,
          orient: "vertical",
          left: "right",
          top: "center",
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {},
          },
        },
        visualMap: {
          min: 0,
          max: 1500000,
          text: ["High", "Low"],
          realtime: false,
          calculable: true,
          inRange: {
            color: ["lightskyblue", "yellow", "orangered"],
          },
        },

        series: [
          {
            name: "湖南地图",
            type: "map",
            mapType: "湖南", // 自定义扩展图表类型，和上文注册名字的一样
            label: {
              show: true,
            },
            itemStyle: {
              normal: {
                //正常状态
                label: {
                  show: true,
                  //地图上显示的数据，分别对应data中的name和value
                  // color: "#fff",
                },
                // areaColor: "#0a76d1", //地图区域的颜色
              },
              // emphasis: {
              //   //  鼠标移入高亮状态
              //   label: {
              //     show: true,
              //   },
              //   areaColor: "#ccb213",
              // },
            },
            aspectScale: 1, //用于 scale 地图的长宽比
            zoom: 1,
            top: "60",
            // data: data,
            data: data,
          },
        ],
      };
      myMap.clear();
      myMap.setOption(option);
      myMap.on("mouseover", function (params) {
        // console.log(params);
        _this.$emit("fatherMethod", params);
      });
      myMap.on("click", function (params) {
        console.log(params);
		 _this.$emit("tocityMethod", params);
        // callback?.(params);
      });
    },
  },
  mounted() {
    // this.test();
    this.getMapInfo(); //获取地图显示的数据
  },
};
</script>

<style scoped>
.map {
  height: 800px;
}
</style>
